<template>
  <div>
    <div >
      <img :src="dogImgUrl" alt="">
      <p @click="clickFn" :style="{backgroundColor: color}">{{dogName}}</p>
    </div>
   
 </div>
</template>
<script>
export default {
  props:['dogImgUrl','dogName','index'],
   data(){
      return{
        color:''
      }
    },
  methods:{
    clickFn(){
      this.color='green'
      this.$emit('yy',this.index,this.dogName)
     
    },
   
  }
  
}
</script>

<style>
img{
  width: 300px;
  height: 300px;

}
div{
  float: left;

}
p{
    text-align: center;
}
</style>